<template>
    <div class="box">
        <h1>组件间通信8: mixin</h1>

        <p>BABA有存款: {{ money }}</p>
        <button @click="borrowMoneyFormSon">找儿子借钱100</button><br />
        <button @click="borrowMoneyFormDaughter">找女儿借钱150</button><br />
        <button @click="borrowMoneyFormChild">找所有孩子借钱200</button><br />

        <br />
        <Son ref="son" />

        <br />
        <Daughter ref="daughter" />
    </div>
</template>

<script>
// mixin
// mixin 混入的意思
import Son from "./Son";
import Daughter from "./Daughter";
export default {
    name: "ChildrenParentTest",
    data() {
        return {
            money: 1000,
        };
    },
    components: {
        Son,
        Daughter,
    },
    methods: {
        borrowMoneyFormSon() {
            this.money += 100;

            this.$refs.son.money -= 100;
        },
        borrowMoneyFormDaughter() {
            this.money += 150;

            this.$refs.daughter.money -= 150;
        },
        borrowMoneyFormChild() {
            this.money += 200;

            this.$children.forEach(child => {
                child.money -= 100;
            })
        }
    }
};
</script>

<style>
</style>
